<template>
  <div style="background-color:white">
    <el-row class="bottom-space">
      <el-col :span="12">
        <el-button plain size="small" type="success" @click="syncSelected">批量推送</el-button>
        <el-button plain size="small" type="success" @click="syncAll">全量推送</el-button>
      </el-col>
      <el-col :span="12">
        <div style="float: right">
          <div style="display: inline-block; color: red;font-weight: bolder;">请选择推送平台:</div>
          <div style="display: inline-block">
            <el-input v-model="termBookMetadata.name" placeholder="请输入图书名称" size="small"
                      @keyup.enter.native="searchEnterFun($event)">
              <el-select slot="prepend" v-model="termBookMetadata.selectedPlatform" collapse-tags
                         placeholder="请选择推送平台"
                         style="width: 180px;" @change="selectItem">
                <el-option
                  v-for="platform in platforms"
                  :key="platform.id"
                  :label="platform.name"
                  :value="platform.id">
                </el-option>
              </el-select>
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
              <el-button slot="append" :icon="appendIcon" v-on:click="switchAppend"></el-button>
            </el-input>
          </div>
        </div>
        <div v-if="showAdvance"
             id="advance"
             style="padding: 10px; float: right;">
          <div>
            <div style="margin-top: 20px; display: flex;">
              <div class="advancedSearchLabel">图书级别</div>
              <div style="width: 217px">
                <el-select v-model="termBookMetadata.category" clearable filterable placeholder="请选择图书级别">
                  <el-option label="名词委员会" value="0"></el-option>
                  <el-option label="卫健委发布标准" value="1"></el-option>
                  <el-option label="教材" value="2"></el-option>
                  <el-option label="专著" value="3"></el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div>
            <div style="margin-top: 10px; display: flex;">
              <div class="advancedSearchLabel">图书版本</div>
              <div style="width: 217px">
                <el-input v-model="termBookMetadata.version" placeholder="请输入图书版本"
                          @keyup.enter.native="searchEnterFun($event)"></el-input>
              </div>
            </div>
          </div>
          <div>
            <div style="margin-top: 10px; display: flex;">
              <div class="advancedSearchLabel">图书ISBN号</div>
              <div style="width: 217px">
                <el-input v-model="termBookMetadata.isbn" placeholder="请输入图书ISBN号"
                          @keyup.enter.native="searchEnterFun($event)"></el-input>
              </div>
            </div>
          </div>
          <div style="margin-top: 30px; right: 10px;">
            <el-row>
              <el-col :offset="6"
                      :span="6">
                <div style="margin-left: 90px;height: 32px; width: 88px;">
                  <el-button size="small"
                             v-on:click="advanceCancel">取 消
                  </el-button>
                </div>
              </el-col>
              <el-col :offset="2"
                      :span="2">
                <div style="margin-left: 30px;height: 32px; width: 88px;">
                  <el-button size="small"
                             v-on:click="reset">重置
                  </el-button>
                </div>
              </el-col>
              <el-col :offset="2"
                      :span="2">
                <div div
                     style="margin-left: 30px;height: 32px; width: 88px;">
                  <el-button size="small"
                             type="success"
                             v-on:click="advanceConfirm">确 定
                  </el-button>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-table :data="tableData" :height="tableHeight" border highlight-current-row stripe style="width: 100%;"
                @selection-change="selectionChange">
        <el-table-column
          v-model="selectedBook"
          align="center"
          type="selection" width="50">
        </el-table-column>
        <el-table-column label="书本名称" min-width="160" prop="name">
        </el-table-column>
        <el-table-column label="书本级别" min-width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.category === 0">名词委员会</span>
            <span v-if="scope.row.category === 1">卫健委发布标准</span>
            <span v-if="scope.row.category === 2">教材</span>
            <span v-if="scope.row.category === 3">专著</span>
          </template>
        </el-table-column>
        <el-table-column label="版本" min-width="120" prop="version"></el-table-column>
        <el-table-column label="ISBN" min-width="160" prop="isbn"></el-table-column>
        <el-table-column label="导入时间" min-width="160" prop="createdTime"></el-table-column>
        <el-table-column label="导入者" min-width="120" prop="createdBy"></el-table-column>
        <el-table-column label="操作" min-width="180">
          <template slot-scope="scope">
            <el-link type="primary" @click.prevent="detailById(scope.row.id, scope.row.status)">详情</el-link>
            <el-link v-if="scope.row.status !== 0 && scope.row.status !== 4" type="primary"
                     @click.prevent="sync(scope.row.id)">推送
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-pagination v-if="multiplePages" :page-size="pageSize" :total="totalNum" background
                     layout="total, prev, pager, next, jumper" style="text-align: right;margin-top: 10px"
                     @current-change="handleCurrentChange"></el-pagination>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'BookPush',
  data() {
    return {
      appendIcon: "el-icon-caret-bottom",
      showAdvance: false,
      oplogVisible: false,
      bookMetadataId: '',
      uploadVisible: false,
      multiplePages: true,
      noData: true,
      totalNum: 0,
      currentPage: 0,
      pageSize: 10,
      tableData: [],
      tableHeight: '',
      status: '',
      termBookMetadata: {},
      platforms: [],
      selectedBook: []
    }
  },
  methods: {
    handleCurrentChange: function (val) {
      this.currentPage = val;
      this.getTableData();
    },
    searchEnterFun(e) {
      const keyCode = window.event ? e.keyCode : e.which;
      if (keyCode === 13) {
        this.currentPage = 0;
        this.getTableData();
      }
    },
    switchAppend: function () {
      if (this.showAdvance) {
        this.showAdvance = false;
        this.appendIcon = "el-icon-caret-bottom";
      } else {
        this.showAdvance = true;
        this.appendIcon = "el-icon-caret-top";
      }
    },
    getTableData: function () {
      if (UTIL.isEmpty(this.termBookMetadata.selectedPlatform)) {
        return;
      }
      this.termBookMetadata.currentPage = this.currentPage;
      this.termBookMetadata.pageSize = this.pageSize;
      this.axios.post('/pmph/action/term/selectSyncBookMetadata', this.termBookMetadata).then((response) => {
        this.noData = response.data.total <= 0;
        this.tableData = response.data.records;
        this.totalNum = response.data.total;
      })
    },
    detailById(id) {
      this.$router.push({
        path: "/term/push",
        query: {
          id: id,
          selectedPlatform: this.termBookMetadata.selectedPlatform
        }
      });
    },
    reset() {
      this.termBookMetadata.name = '';
      this.termBookMetadata.category = '';
      this.termBookMetadata.version = '';
      this.termBookMetadata.isbn = '';
    },
    advanceCancel: function () {
      this.showAdvance = false;
    },
    advanceConfirm: function () {
      this.currentPage = 1;
      this.getTableData();
      this.showAdvance = false;
    },
    sync(id) {
      this.termBookMetadata.syncIds = id;
      this.syncToPlatform();
    },
    syncSelected() {
      if (this.selectedBook.length <= 0) {
        this.$message.warning("请选择推送的图书");
        return;
      }
      this.termBookMetadata.syncIds = this.selectedBook.map(item => item.id).join(",");
      this.syncToPlatform();
    },
    syncAll() {
      this.syncToPlatform();
    },
    syncToPlatform() {
      this.axios.post('/pmph/action/term/syncBookToPlatform', this.termBookMetadata).then(() => {
        this.termBook
        this.$message.success('推送任务提交成功, 请稍后查看推送状态');
      })
    },
    selectItem(val) {
      this.currentPage = 1;
      this.termBookMetadata.selectedPlatform = val;
      this.getTableData();
    },
    selectionChange(val) {
      this.selectedBook = [];
      this.selectedBook = val;
    },
    getAllPlatforms() {
      this.axios.get("/pmph/action/knowledgeLib/selectAllPlatforms", {
        params: {
          type: CONST.SYSTEM.TERM
        }
      }).then((res) => {
        this.platforms = res.data.platforms;
        if (UTIL.isNotEmpty(this.platforms) && this.platforms.length > 0) {
          this.termBookMetadata.selectedPlatform = this.platforms[0].id;
          this.getTableData();
        }
      })
    },
  },
  activated() {
    if (!this.$route.meta.isUseCache) {
      this.getTableData();
    }
  },
  created() {
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 150;
    this.getAllPlatforms();
  }
}
</script>

<style scoped>
.bottom-space {
  margin-bottom: 10px;
}
</style>
